<script setup>
	import {onLoad} from "@dcloudio/uni-app"
	import {ref} from 'vue'
	const photos =ref('')
	const url =ref('')
      onLoad((query)=>{
		// 动态设置导航栏标题
		console.log(query,'111')
		url.value = query.url
		if(query.photo === 'undefined') {
			uni.setNavigationBarTitle({
				title:  '自定义'
			});
		}else {
			uni.setNavigationBarTitle({
				title: query.photo || '自定义'
			});
		}
		  photos.value =query.photo
		  setTimeout(()=>{
			  uni.navigateTo({
			  	url:`/subpack-age/Version/index?photo=${query.photo}`
			  })
		  },5000)
	    })
	 console.log(photos,33)
	 
	 
</script>

<template>
	<view class="prcessing">
		<view class="prcessing-box">
			<image class="back-prcessing" src="../../static/a.png" alt="Description"></image>
			<view class="prcessing-image">
				<!-- <image class="image" src="../../static/index.png" alt="Description"></image> -->
				<image class="image" :src="url" alt="Description"></image>
				
			</view>
			<view class="box"></view>
			<view class="bottom">
				<image class="image" src="../../static/b.png"  alt="Description"></image>
				正在处理中
			</view>
		</view>
		
	</view>
</template>



<style scoped lang="scss">
	 @keyframes moveLine {
	            0% {
	                top: 0; /* 行线从盒子的顶部开始 */
	            }
	            50% {
	                top: 100%; /* 行线移动到盒子的底部 */
	                transform: translateY(-100%); /* 使用 transform 属性将其调整到盒子内 */
	            }
	            100% {
	                top: 0; /* 行线回到盒子的顶部 */
	            }
	        }
	.prcessing {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.bottom {
			margin-top: 41rpx;
			text-align: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			
			.image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			    vertical-align: middle; /* 垂直对齐中间 */
			}
		}
		.prcessing-box {
			position: relative;
			width: 446rpx;
			height: 712rpx;
			margin-top: 280rpx;
			// border: 3px dashed #eee;
			border-radius: 30rpx;
			
			.box {
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 5rpx;
				background-color: rgba(2, 141, 255, 1);
				  animation: moveLine 7s infinite; /* 设置动画 */
			}
			.prcessing-image {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 90%;
				height: 90%;
				.image {
					width: 100%;
					height: 100%;
				}
			}
			
			.back-prcessing {
				width: 100%;
				height: 100%;
			}
		}
		
	}
</style>